<template>
<div class="section-wrap">
 <div class="static-sectionBox">
 <div class="main">

        <div class="basicMsg">
      <no-data v-if="acceptList.length==0 && flag"></no-data>
      <vue-better-scroll class="wrapper" v-else
                         ref="scrollqq"
                         :scrollbar="scrollbarObj"
                         :pullDownRefresh="pullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                        >
        <dl ref="list" v-for="(item,index) in acceptList" :key="index"  @click="getPerInfo(item.ID)">
         <!-- <img class="useravatar"  alt="" onerror="src='../../../assets/avatar2.png'" /> -->
          <div class="perstatuslf">
              <dt>姓名：{{item.UserName}}</dt>
               <dd>性别：{{item.sex}}</dd>
              <dd>工种及级别：{{item.profession}}</dd>
          </div>

        </dl>
           <p class="search-btn" @click="addPerson" v-show="this.$route.query.urltype=='1'?false:true">添加人员伤亡</p>
      </vue-better-scroll>

    </div>
    <div>

    </div>
 </div>
 </div>

        <myMenu></myMenu>
</div>

 </template>
 <script>
  import { XInput} from 'vux'
  import VueBetterScroll from 'vue2-better-scroll'
  import myMenu from '@/commonComponents/menu'
  import {personList} from '@/api/api'
  import noData from '@/commonComponents/noData/noData.vue'
export default {
    name: 'CasualtiesList',
    data () {
        return {
        name: '',
        flag: false,
        scrollbarObj: {
          fade: true
        },
        // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
        pullDownRefreshObj: false,
        // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: '加载更多',
            noMore: '没有更多数据了'
          }
        },
        startY: 0, // 纵轴方向初始化位置
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        acceptList: [], // 数据库列表数据
        listCount: 0, // 当前页列表条数
        listAllCount: 0, // 列表总数
        nowaccpeptList: [], // 页面显示
        userInfo: {},
        param: {
          allowPaging: true,
          data: {
            DepartId: '393498467',
            name: ''
          },
          pageIndex: 0,
          pageSize: 20
        }
      }
    },
    components: {
    VueBetterScroll,
      XInput,
      noData,
      myMenu
    },
      created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.departsir = this.userInfo.departsir

      if (this.$store.state.checkcompany.sourceType !== 'CasualtiesDetail') {
        this.$store.state.checkcompany = {}
      }
      if (localStorage.getItem('listSearch')) {
        this.formData = JSON.parse(localStorage.getItem('listSearch'))
        localStorage.removeItem('listSearch')
      }
      this.getInfo()
    },
    methods: {
        setFormData (formData, uploadLength) {
            this.uploadImgFormData = formData
            this.uploadLength = uploadLength
        },
        getInfo () {
              let params = {
                  'allowPaging': false,
                  'business': 'GetAccidentReportList',
                  'data': {
                      'AccidentType': '',
                      'EndDate': '',
                      'ProjectID': '',
                      'StartDate': '',
                      'id': this.$route.query.id
                  },
                  'pageIndex': 0,
                  'pageSize': 10000,
                  'tokenId': '',
                  'userId': this.userInfo.userid
              }
            this.$axiosAjax.getConfigJson(params)
            .then((res) => {
             if (res.data.code == 0) {
               let id = this.$route.query.id
               let perlist = res.data.data
                localStorage.removeItem('nowaccpeptList')// 先清除缓存

                    if (this.$route.query.urltype == '1')// 如果查看的话 就取已经有的列表
                    {
                      this.acceptList = perlist[0].AccidentPerson
                      localStorage.setItem('nowaccpeptList', JSON.stringify(this.acceptList))
                    } else { // 添加就要取缓存的数据
                      this.acceptList = this.$store.state.personCasualtiesList
                      localStorage.setItem('nowaccpeptList', JSON.stringify(this.acceptList))
                    }
                } else {
                    this.$vux.toast.text(res.data.info)
                }
            }).catch(() => {

            })
         },
         addPerson () {
           this.$router.push('CasualtiesDetail')
         },
         getPerInfo (val) {
           this.$router.push({path: 'CasualtiesDetail', query: {id: val, tyof: '1'}})
         }

    }
}
 </script>
<style scoped  lang="less" >
 @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';
  .main{
    background-color: #fff !important;

  }
   .search-btn {
      width: 200px;
      line-height: 40px;
      border-radius: 20px;
      margin: 23px auto;
      text-align: center;
      color: #fff;
      background: #2269ff;
    }
    .search-btn:hover {
      opacity: 8;
    }
.red{
    color: red;
}
.org{
    color: #f8733b;
}
  .basicMsg {
   box-sizing: border-box;
    position:fixed;
    top:20px;
    width:100%;
    height: 100%;
    left:0;
    overflow:scroll;
    bottom:100px;
    background:#fff;
    dl {
      height: 80px;
      border-bottom: 1px solid #f0f0f2;
      font-size: 12px;
      margin-left: 20px;
      overflow: hidden;
      background: url(../../../../static/images/index/more3.png) no-repeat right 20px center;
      background-size: 6px 10px;
     .perstatuslf{
    height: 80px;
    width: 50%;

    float: left
}

.perstatus{

    width: 20%;
    height: 80px;
     margin-right: 35px;
     text-align: right;
     line-height: 80px;
     font-weight: bold;
    float: right;

     margin-bottom: 2px;
}
      img {
        width: 50px;
        height: 50px;
        background: url('../../../assets/avatar2.png') no-repeat center center;
        background-size: 50px 50px;
        border-radius: 50%;
        margin: 15px 10px;
        float: left;
      }
      dt {
        width: 200px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        color: #333;
        font-size: 14px;
        float: left;
        margin: 8px 0 0px 0;
        span {
          width: 100px;
          font-weight: 100;
          float: right;
          color: #999;
          font-size: 14px;
        }
      }
      dd {
        width: 200px;
        float: left;
        color: #8d8d8d;
         margin: 8px 0 0px 0;
      }
    }
  }
    .staticListLis{
    background-color: #ffffff;
    line-height: 27px;
    padding: 14px 0;
    border-bottom: 1px solid #efeff4;
    font-size: 14px;
    color: #999;

}

.baseDanger{
    margin-left: 19px;
    color: #2269ff;
}
.majorDanger{
    margin-left: 10px;
    color: red;
}
.totalDangerNum{
    margin-left: 10px;
    color: #f8733b;
}
.staticList-content .staticListFlex{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 20px;
}
.staticListFlex_l{
    color: #333;
    font-size: 14px;
}
</style>
